<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Coolface</title>
    <meta name="keywords" content="share"/>
    <meta name="description" content="下载，ios, android"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <style type="text/css">
        html, body, p ,ul, li{
            padding: 0;
            margin: 0;
        }
        html, body{
            width: 100%;
            height:100%;
            font-family: 'PingFangSC','STHeiti','Microsoft YaHei','Helvetica','Arial',sans-serif;
        }
        .page{
            width: 100%;
            /*height: 100%;*/
            text-align: center;
            margin-bottom: 10%;
        }
        .page01{
            /*padding: 20px 0;*/
        }
        .page01 ul {
            padding: 20px;
            overflow: hidden;
        }
        .page01 ul li{
            float: left;
            list-style: none;
        }
        .page01 .logo{
            width: 30%;
        }
        .page01 .logo img{
            width: 58%;
        }
        .page01 .info{
            width: 70%;
            margin-left: -10px;
            padding-top: 2px;
        }
        .page01 .info p:first-child{
            width: 84%;
        }
        .page01 .info p:first-child img{
            width: 100%;
        }
        .page01 .info p:last-child{
            text-align: left;
            line-height: 33px;
        }
        .page01 .iphone img{
            width: 50%;
        }
        .page02 .title img, .page03 .title img, .page04 .title img{
            width: 20%;
        }
        .page02 .iphone2{
            background: url("./image/download/iPhone6_2_bg.png") no-repeat;
        }
        .page03 .iphone3{
            background: url("./image/download/iPhone6_3_bg.png") no-repeat;
        }
        .page04 .iphone4{
            background: url("./image/download/iPhone6_4_bg.png") no-repeat;
        }
        .page02 .iphone2, .page03 .iphone3, .page04 .iphone4{
            background-position: center;
            background-size: contain;
            margin-top: 20px;
        }
        .page02 .iphone2 img, .page03 .iphone3 img, .page04 .iphone4 img{
            width: 50%;
        }
        .page03 .info{
            width: 280px;
            margin: 0 auto;
        }
        .page .info{
            color: #989898;
        }
        .page02, .page03, .page04{
            padding-top: 20px;
            box-sizing: border-box;
        }
        .androidDownload{
            display: inline-block;
            width: 40%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            background: #ff2f94;
            border-radius: 10px;
            color: white;
            margin-right: 10px;
        }
        .iosDownload{
            display: inline-block;
            width: 40%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            background: #236eec;
            border-radius: 10px;
            color: white;
        }
        @font-face {
            font-family: 'iconfont';  /* project id 401290 */
            src: url('//at.alicdn.com/t/font_401290_u6qm092s62f39pb9.eot');
            src: url('//at.alicdn.com/t/font_401290_u6qm092s62f39pb9.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_401290_u6qm092s62f39pb9.woff') format('woff'),
            url('//at.alicdn.com/t/font_401290_u6qm092s62f39pb9.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_401290_u6qm092s62f39pb9.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:"iconfont" !important;
            font-size:28px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="page page01">
    <ul>
        <li class="logo"><img src="./image/download/logo.png" alt=""></li>
        <li class="info">
            <p><img src="./image/download/logo_c.png" alt=""></p>
            <p class="text">让遇见不留遗憾</p>
        </li>
    </ul>
    <div class="iphone">
        <img src="./image/download/iPhone6.png" alt="">
    </div>
    <div style="margin-top: 8%;">
        <span class="androidDownload download"><i class="iconfont">&#xe6ec;</i> Android下载</span>
        <span class="iosDownload download"><i class="iconfont">&#xe660;</i> IOS下载</span>
    </div>

</div>
<div class="page page02">
    <p class="title"><img src="./image/download/qqrp.png" alt=""></p>
    <p class="info">只推荐最HOT的新闻</p>
    <div class="iphone2">
        <img src="./image/download/iPhone6_2.png" alt="">
    </div>
</div>
<div class="page page03">
    <p class="title"><img src="./image/download/sljy.png" alt=""></p>
    <p class="info">找到你想认识的TA,找到你想认识的TA,找到你想认识的TA</p>
    <div class="iphone3">
        <img src="./image/download/iPhone6_3.png" alt="">
    </div>
</div>
<div class="page page04">
    <div></div>
    <p class="title"><img src="./image/download/spxwf.png" alt=""></p>
    <p class="info">轻松变视频达人</p>
    <div class="iphone4">
        <img src="./image/download/iPhone6_4.png" alt="">
    </div>
    <div style="margin-top: 30px">
        <span class="androidDownload download"><i class="iconfont">&#xe6ec;</i>Android下载</span>
        <span class="iosDownload download"><i class="iconfont">&#xe660;</i> IOS下载</span>
    </div>
</div>
<!--<script src="js/lib/fastclick.js"></script>-->
<!--<script>-->
    <!--$(function() {-->
        <!--FastClick.attach(document.body);-->
    <!--});-->
<!--</script>-->
<script type="text/javascript">
    for(var i = 0; i < getElementsByClass('download').length; i++) {
        getElementsByClass('download')[i].onclick = function () {
            var ua = navigator.userAgent.toLowerCase();
            var config = {
                /*scheme:必须*/
                scheme_IOS: 'Coolface://',
                scheme_Adr: 'app://com.yxkj.youdoneed',
                download_IOS: 'https://www.pgyer.com/IuLm',
                download_Adr: 'https://www.pgyer.com/E8SB',
                timeout: 600
            };
            openclient();
            function openclient() {
                var startTime = Date.now();
                var ifr = document.createElement('iframe');
                ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
                ifr.style.display = 'none';
                document.body.appendChild(ifr);
                var t = setTimeout(function() {
                    var endTime = Date.now();
                    if (!startTime || endTime - startTime < config.timeout + 200) { //如果装了app并跳到客户端后，endTime - startTime 一定> timeout + 200
                        window.location = ua.indexOf('os') > 0 ? config.download_IOS : config.download_Adr;
                    }
                }, config.timeout);
                window.onblur = function() {
                    clearTimeout(t);
                }
            }
        };
    }
    function getElementsByClass(classnames){
        var classobj = new Array();
        var classint = 0;
        var tags =document.getElementsByTagName("*");
        for(var i in tags){
            if(tags[i].nodeType == 1){
                if(tags[i].getAttribute("class") && tags[i].getAttribute("class").indexOf(classnames) > -1){
                    classobj[classint] = tags[i];
                    classint++;
                }
            }
        }
        return classobj;
    }
</script>
</body>
</html>